<template>
  <div class="body">
    <div :style="`display:${display}`">
      <input
        type="file"
        ref="file"
        class="hidden"
        accept=".ofd"
        @change="fileChanged"
      />
    </div>
    <div class="context" @dblclick="displayState()">
      <div id="content" class="content"></div>
    </div>
  </div>
</template>
<script>
import { parseOfdDocument, renderOfd } from "ofd.js";

export default {
  data() {
    return {
      screenWidth: 0,
      display: "block",
    };
  },
  methods: {
    displayState() {
      return (this.display = this.display == "block" ? "none" : "block");
    },
    fileChanged() {
      this.handleChange(this.$refs.file.files[0]);
    },
    handleChange(file) {
      parseOfdDocument({
        ofd: file,
        success(res) {
          //输出ofd每页的div
          this.screenWidth = document.body.clientWidth;
          const divs = renderOfd(this.screenWidth, res[0]);
          let contentDiv = document.getElementById("content");
          contentDiv.innerHTML = "";
          for (const div of divs) {
            div.style.margin = "auto";
            div.style.border = "1px solid black";
            div.style["margin-bottom"] = "4px";
            contentDiv.appendChild(div);
          }
        },
        fail(error) {
          console.log(error);
        },
      });
    },
  },
};
</script>
 <style>
body {
  background-color: #333;
}
</style>